<template>
  <div class="wrapper">
    <!--头部-->
    <header>
      <p>新增送货地址</p>
    </header>
    <!--表单部分-->
    <ul class="form-box">
      <li>
        <div class="title">
          联系人:
        </div>
        <div class="content">
          <input type="text" v-model="deliveryAddress.contactName" placeholder="联系人姓名">
        </div>
      </li>
      <li>
        <div class="title">
          性别:
        </div>
        <div class="content" style="font-size:3vw;">
          <input type="radio" v-model="deliveryAddress.contactSex" value="1" style="width:6vw;height:3.2vw;">男
          <input type="radio" v-model="deliveryAddress.contactSex" value="0" style="width:6vw;height:3.2vw;">女
        </div>
      </li>
      <li>
        <div class="title">
          电话:
        </div>
        <div class="content">
          <input type="tel" v-model="deliveryAddress.contactTel" placeholder="电话">
        </div>
      </li>
      <li>
        <div class="title">
          收货地址:
        </div>
        <div class="content">
          <input type="text" v-model="deliveryAddress.address" placeholder="收货地址">
        </div>
      </li>
    </ul>

    <div class="button-add">
      <button @click="addUserAddress">保存</button>
    </div>
    <!--底部菜单-->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";

export default {
  name: "AddUserAddress",
  data() {
    return {
      businessId: this.$route.query.businessId,
      user: {},
      deliveryAddress: {
        contactName: '',
        contactSex: 1,
        contactTel: '',
        address: ''
      }
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
  },
  components: {
    Footer
  },
  methods: {
    addUserAddress() {
      //输入信息检测
      if (this.deliveryAddress.contactName == '') {
        alert('联系人姓名不能为空！');
        return;
      }
      if (this.deliveryAddress.contactTel == '') {
        alert('联系人电话不能为空！');
        return;
      }
      if (!this.checkPhoneNumber(this.deliveryAddress.contactTel)) {
        alert('手机号码格式错误');
        return;
      }
      if (this.deliveryAddress.address == '') {
        alert('联系人地址不能为空！');
        return;
      }
      //设置发送给后端的deliveryAddress
      this.deliveryAddress.userId = this.user.userId;

      let url = 'deliveryaddress';
      this.$axios.post(url, JSON.stringify({
        contactName: this.deliveryAddress.contactName,
        contactSex: this.deliveryAddress.contactSex,
        contactTel: this.deliveryAddress.contactTel,
        address: this.deliveryAddress.address,
        userId: this.user.userId
      }), {
        headers: {
          'Content-Type': 'application/json;charset=utf-8' //设置请求头
        }
      }).then(response => {
        if (response.data.code === 200) {
          //成功返回userAddress页面
          this.$router.push({path: '/userAddress', query: {businessId: this.businessId}});
        } else {
          alert('新增地址失败！');
        }
      }).catch(error => {
        console.error(error);
      });
    },
    //检测手机号合法性
    checkPhoneNumber(phonenumber) {
      var re = /^1\d{10}$/;
      let str = phonenumber;
      if (re.test(str)) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style scoped>
/**************************总容器**************************/
.wrapper {
  width: 100%;
  height: 100%;
}

/**************************header**************************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #FFF;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

/**************************表单信息**************************/
.wrapper .form-box {
  width: 100%;
  margin-top: 12vw;
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
}

.wrapper .form-box li .title {
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}

.wrapper .form-box li .content {
  flex: 1;

  display: flex;
  align-items: center;
}

.wrapper .form-box li .content input {
  border: none;
  outline: none;
  width: 100%;
  beight: 4vw;
  font-size: 3vw;
}

.wrapper .button-add {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}

.wrapper .button-add button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;

  border: none;
  outline: none;
  border-radius: 4px;
  color: #fff;
  background-color: #38CA73;
}
</style>